<template>
	<view class="page_reg">
		
		<form class="form-input" @submit="formSubmit">
			<view class="code">
				<input type="text" name="checkCode"  placeholder="验证码" v-model="captchaImg" />
				<button class="submit" type="primary"  :class="{active : !disableCodeBtn}" :disabled="disableCodeBtn"  @click="getCode">{{codeBtn.text}}</button>
			</view>
		
			<view style="width: 100%;">
				<checkbox-group class="uni-flex" name="loves">
				<label class="checkbox">
					<checkbox value="button" name="che" checked />
					<text class="protocol_tip">我已阅读并同意</text>
				</label>
				</checkbox-group>
				<text class="protocol_tip link"  @click="navTo('/pages/agreement/agreement')">《注册服务协议》</text>
			</view>
			<view>
				<button class="submit1" type="primary" formType="submit"  >绑定</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../../common/graceChecker.js");
	export default {
		data() {
			return {
				checkCode: '',
				PHONE: '',
				SIGNATURE: '',
				inviteid : '',
				seconds: 60,
				captchaImg: '',
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds
				},
			};
		},
		onLoad(options) {
			this.PHONE = options.PHONE;
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods:{
			...mapMutations(['login']),
			navTo(url){
				uni.navigateTo({
					url,
				})
			},
			getCode(){
				//验证通过以后向后台发送请求
				this.$http.post('/user/sendWxPhoneCode',{
					PHONE : this.PHONE,
					SIGNATURE : uni.getStorageSync("SIGNATURE")
				}).then((res)=>{
					if(res.data.STATE === '102'){
						uni.showToast({
							title: "该手机已经注册过，请直接登录",
							icon: "none",
						})
					}else{
						this.codeBtn.waitingCode = true;
						this.codeBtn.count = this.seconds;
						this.codeBtn.text = '请稍候'+this.codeBtn.count + 's';
						let countdown = setInterval( () => {
							this.codeBtn.count--;
							this.codeBtn.text = '请稍候'+this.codeBtn.count + 's';
							if( this.codeBtn.count < 0 ){
								clearInterval(countdown);
								this.codeBtn.text = '重新发送';
								this.codeBtn.waitingCode = false;
							}
						},1000);
					}
				})
				.catch((err)=>{
				    console.log('request fail', err);
				})
			},
			formSubmit(e) {
				// 将下列代码加入到对应的检查位置
				// 定义表单规则
				var rule = [
					{name:"checkCode", checkType : "notnull",checkRule:"",  errorMsg:"验证码未填写"},
					{name:"loves", checkType : "notnull",checkRule:"", errorMsg:"请阅读并通过协议"},
				];
				//进行表单检查
				var formData = e.detail.value;
				console.log(e.detail.value);
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					// uni.showToast({ title:"恭喜", icon: "none" });
					//通过保存用户信息方法
					this.SIGNATURE = uni.getStorageSync("SIGNATURE");
					//验证通过以后向后台发送请求
					this.$http.post('/user/wxToPhone',{
						OPENID:uni.getStorageSync("OPENID"),
						PHONE : this.PHONE,
						SIGNATURE : this.SIGNATURE,
						CODE : e.detail.value.checkCode,
					}).then((res)=>{
						
						//判断返回内容
						if(res.data.STATE === "0" && res.statusCode === 200){
								this.login(res.data.OBJECT);
								uni.showToast({
								title: '绑定成功!',
								icon: "none",
							})
							setTimeout(function () {
								//成功后页面跳转   关闭所有页面，跳转到登录页面
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}, 500);
								
							
							
						}else {
							uni.showToast({
								title: res.data.MSG,
								icon: "none",
							})
							
						}
						
					})
					.catch((err)=>{
					    console.log('request fail', err);
					})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			}
		},
		computed: {
			disableCodeBtn: function (){
				return this.codeBtn.waitingCode ;
			} 
		},
		
	}
</script>

<style>
	page {
		background-color: #f5f6f8;
	}
</style>
<style lang="scss" scoped>
	$text-color: #B6B6B6;
	$form-border-color: rgba(214, 214, 214, 1);
	
	.page_reg {
		height: 100%;
		margin: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.tip {
		margin-top: 30px;
		font-size: 13px;
		color: $text-color;
	}
	.code {
		width: 100%;
		min-height: 65px;
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid $form-border-color;
		font-size: 35upx;
		.submit {
			color: white;
			background-color: #E02E24;
			-webkit-tap-highlight-color: rgba(252, 44, 93, 1.0);
		
			&:active {
				color: #B6B6B6;
				background-color: rgba(252, 44, 93, 0.8);
			}
		}
	}
	
	.pwd {
		font-size: 35upx;
		width: 100%;
		margin-top: 10px;
		min-height: 65px;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid $form-border-color;
	}
	
	.protocol_tip {
		font-size: 16px;
		color: $text-color;
	}
	.submit1 {
		width: 100%;
		margin-top: 30px;
		color: white;
		background-color:#E02E24;
		-webkit-tap-highlight-color: rgba(252, 44, 93, 1.0);
	
		&:active {
			color: #B6B6B6;
			background-color: rgba(252, 44, 93, 0.8);
		}
	}
	
	.link {
		color: #3a8de8;
	}
</style>
